NEW_FILE_CODE
<template>
  <el-dialog v-model="dialogVisible" title="维修任务详情" width="70%" @close="handleClose">
    <el-form ref="formRef" label-width="120px" v-loading="formLoading">
      <!-- 基本信息 -->
      <el-card class="box-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="维修单号">
              <span class="info-value">{{ jobDetail.code || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="故障分类">
              <span class="info-value">{{ jobDetail.faultName || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="模具编码">
              <span class="info-value">{{ jobDetail.accountCode || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="申请人">
              <span class="info-value">{{ jobDetail.applicantName || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属部门">
              <span class="info-value">{{ jobDetail.departName || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下达时间">
              <span class="info-value">{{ jobDetail.createTime ? formatDate(jobDetail.createTime) : '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="接收时间">
              <span class="info-value">{{ jobDetail.jobReceiveTime ? formatDate(jobDetail.jobReceiveTime) : '-'
                }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务状态">
              <dict-tag :type="DICT_TYPE.MOLD_REPAIR_STATUS" :value="jobDetail.status" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="故障描述">
              <div class="rich-text-content" v-html="jobDetail.faultDescription || '-'"></div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 报工信息 -->
      <el-card class="box-card mt-20" shadow="never" v-if="jobDetail.status >= 3">
        <template #header>
          <div class="card-header">
            <span>报工信息</span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="维修分类">
              <span class="info-value">{{ jobDetail.repairCategoryName || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维修人员">
              <span class="info-value">{{ formatRepairers(jobDetail.repairerIds) || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务接收时间">
              <span class="info-value">{{ jobDetail.jobReceiveTime ? formatDate(jobDetail.jobReceiveTime) : '-'
                }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="任务开始时间">
              <span class="info-value">{{ jobDetail.jobStartTime ? formatDate(jobDetail.jobStartTime) : '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务结束时间">
              <span class="info-value">{{ jobDetail.jobEndTime ? formatDate(jobDetail.jobEndTime) : '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="理论维修工时">
              <span class="info-value">{{ jobDetail.jobExecutionDuration || '-' }} 分钟</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="实际开始时间">
              <span class="info-value">{{ jobDetail.actualStartTime ? formatDate(jobDetail.actualStartTime) : '-'
                }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实际结束时间">
              <span class="info-value">{{ jobDetail.actualEndTime ? formatDate(jobDetail.actualEndTime) : '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实际维修工时">
              <span class="info-value">{{ calculateActualDuration() }} 分钟</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="维修成本">
              <span class="info-value">{{ jobDetail.repairCost !== undefined ? jobDetail.repairCost : '-' }} 元</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="故障分析">
              <div class="rich-text-content" v-html="jobDetail.faultAnalysis || '-'"></div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="维修项目">
              <div class="rich-text-content" v-html="jobDetail.repairItems || '-'"></div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>

    <template #footer>
      <el-button @click="handleClose">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { RepairJobApi } from '@/api/mold/repairjob'
import * as UserApi from '@/api/system/user'
import type { UserVO } from '@/api/system/user'
import { DICT_TYPE } from '@/utils/dict'
import { dayjs } from 'element-plus'

const dialogVisible = ref(false)
const formLoading = ref(false)
const jobDetail = ref<any>({}) // 存储job详情
const formRef = ref() // 表单引用

const message = useMessage() // 消息弹窗
const userList = ref<UserVO[]>([]) // 用户列表

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true

  // 重置表单
  jobDetail.value = {}

  await Promise.all([
    getRepairJob(id),
    getUserList()
  ])
}

// 暴露方法给父组件使用
defineExpose({ open })

/** 获取维修任务详情 */
const getRepairJob = async (id: number) => {
  try {
    formLoading.value = true
    const data = await RepairJobApi.getRepairJob(id)
    jobDetail.value = data
  } catch (error) {
    message.error('获取任务详情失败')
    console.error(error)
  } finally {
    formLoading.value = false
  }
}

/** 获取用户列表 */
const getUserList = async () => {
  try {
    userList.value = await UserApi.getSimpleUserList()
  } catch (error) {
    message.error('获取用户列表失败')
    console.error(error)
  }
}

/** 格式化维修人员显示 */
const formatRepairers = (repairerIds: number[]) => {
  if (!repairerIds || !userList.value.length) return '-'

  return repairerIds.map(id => {
    const user = userList.value.find(user => user.id === id)
    return user ? user.nickname : `未知用户(${id})`
  }).join('、')
}

/** 计算实际维修工时（以分钟为单位） */
const calculateActualDuration = () => {
  const start = jobDetail.value.actualStartTime
  const end = jobDetail.value.actualEndTime

  if (!start || !end) {
    return '-'
  }

  // 确保结束时间晚于开始时间
  if (end <= start) {
    return '0'
  }

  // 计算分钟数
  const duration = (end - start) / (1000 * 60)
  const roundedDuration = Math.round(duration)
  return roundedDuration
}

/** 格式化时间戳 */
const formatDate = (timestamp: number | string | Date) => {
  if (!timestamp) return '-'
  // 如果是字符串或数字形式的时间戳，转换为数字
  const ts = typeof timestamp === 'string' ? parseInt(timestamp) : timestamp
  return dayjs(ts).format('YYYY-MM-DD HH:mm:ss')
}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
}

/** 初始化 **/
onMounted(() => {
  getUserList()
})
</script>

<style scoped>
.mt-20 {
  margin-top: 20px;
}

.rich-text-content {
  line-height: 1.6;
  min-height: 24px;
}

.info-value {
  color: #303133;
  font-weight: 400;
}
</style>